<script>
//electron modules
const { exec, execFile } = window.require("child_process");
const fs = window.require("fs");
//app
import colors from '../util/colors';
import iniReader from '../util/iniReader';

export default {
    data() {
        return {
            stat: false,  //是否在运行
            text: "",
            panelName: "MySQL",
            colors: colors
        };
    },
    mounted() {
        this.checkPort();
    },
    destroyed() {
        clearInterval(this.itv);
    },
    methods: {
        changeStat(flag) {
            this.stat = flag;
        },
        getPort() {
            const cfg = iniReader("MySQL/my.ini")["mysqld"];
            console.log(cfg["port"]);
            return cfg["port"];
        },
        checkPort() {
            const port = this.getPort();
            this.itv = setInterval(() => {
                exec(`netstat -ano|findstr \"${port}\"`, (err, stdout, stderr) => {
                    if (err) {
                        this.changeStat(false);
                    } else {
                        if (stdout.indexOf("LISTENING") >= 0) {
                            this.changeStat(true);
                        } else {
                            this.changeStat(false);
                        }
                    }
                });
            }, 1000);
        },
        start() {
            if (this.stat) {
                alert(`${this.panelName}正在运行`);
            } else {
                exec("start.bat", {
                    cwd: "MySQL"
                }, (err, stdout, stderr) => {
                    if (err) console.log(`${this.panelName}被终止`);;
                });
            }
        },
        shutdown() {
            if (this.stat) {
                exec("kill.bat", {
                    cwd: "MySQL"
                }, (err, stdout, stderr) => {
                    if (err) throw err;
                });
            } else {
                alert(`${this.panelName}已经关闭`);
            }
        }

    }

}
</script>

<template>
    <div class="container">
        <div class="title">{{panelName}}管理</div>
        <div class="flexContainer">
            <button class="startup" @click="start()">启动{{panelName}}</button>
            <button class="startup" :style="{backgroundColor: colors.red }" @click="shutdown()">关闭{{panelName}}
            </button>
            <div>
                <span v-if="stat" :style="{ verticalAlign: 'middle', color: 'green', fontSize: '14px' }">启动中</span>
                <span v-if="!stat" :style="{ verticalAlign: 'middle', color: colors.red, fontSize: '14px' }">未启动</span>
                &nbsp;
                <div v-if="stat" class="stat" :style="{backgroundColor:'green'}"></div>
                <div v-if="!stat" class="stat" :style="{backgroundColor:colors.red}"></div>
            </div>
        </div>
    </div>
</template>


<style scoped>
.container {
    border: 1px solid #eee;
    margin: 10px;
    position: relative
}

.title {
    position: absolute;
    top: 0;
    text-align: left;
    left: 10px;
    top: -10px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background-color: #fff;
    color: #aaa;
}

.flexContainer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    height: 100px;
}

.startup {
    text-align: center;
    background-color: green;
    padding: 15px 40px;
    color: #fff;
    display: block;
    font-size: 14px;
}

.stat {
    height: 10px;
    width: 10px;
    display: inline-block;
    vertical-align: middle;
}
</style>
